<template>
	<view style="padding: 20upx;">
		<uni-data-checkbox mode="list" icon="right" v-model="value" :localdata="range" @change="change">
		</uni-data-checkbox>
		<view class="" style="margin-top: 40upx;">
			<text>上传聊天截图</text>
			<uni-file-picker ref="files" :auto-upload="false" v-model="imageValue" fileMediatype="image" mode="grid"
				@select="select" @progress="progress" @success="success" @fail="fail" limit="1"
				style="margin-top: 30upx;" :image-styles="imageStyles" />
		</view>
		<view class="" style="margin-top: 10upx;">
			<text>其他</text>
			<textarea name="" id="" cols="30" rows="10" style="background-color: #fff;color: #999999;padding: 12upx;margin-top: 20upx;width: 660upx;" placeholder="详细举报内容" v-model="tips"></textarea>
		</view>
		<view class="bottom" style="padding: 0;">
			<view class="btn" @click="fabu">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/components/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				value: [],
				imageValue: [],
				chooseImg: [],
				imageStyles: {
					width: 100,
					height: 100,
				    background: '#fff'
				},
				imgurl:'',
				range: [{
					"value": 0,
					"text": "广告、营销"
				}, {
					"value": 1,
					"text": "诈骗、托儿"
				}, {
					"value": 2,
					"text": "色情低俗"
				},{
					"value": 3,
					"text": "恶意骚扰、不文明行为"
				},{
					"value": 4,
					"text": "虚假信息"
				}
				],
				type:'',
				tips:'',
				mid:''
			}
		},
		onLoad(option) {
			this.mid = option.userid
			
		},
		methods: {
			fabu(){
				console.log(this.mid,"sadadas")
				this.$http.jubao({
					type:this.type,
					tips:this.tips,
					mid:this.mid,
					pic:this.imgurl
				}).then(res => {
					console.log(res, "举报")
					if(res.status==200){
						uni.showToast({
							title:res.mess
						})
						this.value = []
						this.tips = '详细举报内容'
						this.imageValue = []
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1200)
					}else{
						uni.showToast({
							title:res.mess,
							icon:'none'
						})
					}
				})
			},
			change(e) {
				console.log('e:', e.detail.data.text);
				this.type = e.detail.data.text
			},
			select(e) {
				uni.showToast({
					title:"正常上传",
					icon:'loading'
				})
				this.chooseImg = e.files
				// console.log('选择文件：', e.files)
				pathToBase64(e.tempFilePaths[0]).then(base64=>{
					// console.log(this.turl,"this.turlthis.turl")
					uni.request({
						url: 'https://dsx.cdzer.com/merchants/Video/uploadImage', //仅为示例，并非真实接口地址。
						data: {
							cover_image:base64
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						method: 'POST',
						success: (res) => {
							// console.log(res, "上传视频封面")
							this.imgurl = res.data.data.image_url
						}
					});
					}).catch(error=>{
						  console.log(error)
					})
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .file-picker__box-content{
		background-color: #fff;
	}
	.bottom{
		width: 100%;
		position: fixed;
		bottom: 50upx;
		height: 100upx;
		// background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		z-index: 99;
		left: 0;
		align-items: center;
		.btn{
			width: 690upx;
			height: 80upx;
			background-color: #FA3534;
			text-align: center;
			line-height: 80upx;
			border-radius: 10upx;
			color: #fff;
		}
	}
</style>
